<template>
  <view class="container">
    <!-- 返回按钮 -->
    <uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar left-icon="left" left-text="返回"
                 title="自定义导航栏" @clickLeft="back" />
				 
    <!-- 服务器列表折叠面板 -->
    <uni-refresh @refresh="onRefresh">
		
      <view class="refresh-content">
        <uni-collapse accordion>
          <uni-collapse-item title="服务器列表" open>
            <view class="table-container">
              <button class = "regenerate-button" @click="handleRegenerate">重新生成</button>
              <uni-table ref="serverTable" :loading="loadingServers" border stripe>
                <uni-tr>
                  <uni-th align="center">名称</uni-th>
                  <uni-th align="center">IP地址</uni-th>
                  <uni-th align="center">更新时间</uni-th>
                </uni-tr>
                <uni-tr v-for="(item, index) in serverList" :key="index">
                  <uni-td align="center">{{ item.name }}</uni-td>
                  <uni-td align="center">{{ item.ip }}</uni-td>
                  <uni-td align="center">{{ item.updatedTime }}</uni-td>
                </uni-tr>
              </uni-table>
            </view>
          </uni-collapse-item>
        </uni-collapse>
      </view>
    </uni-refresh>
  </view>
</template>

<script>
import {ipMachineList} from '../../../../api/mywork/ipscan/index.js'
import {batchInsertMachine} from '../../../../api/mywork/ipscan/index.js'

export default {
  data() {
    return {
      loadingServers: false,
      serverList: [
        { name: 'Server A', ip: '192.168.1.1', updatedTime: '2023-10-01' },
        { name: 'Server B', ip: '192.168.1.2', updatedTime: '2023-10-02' },
        { name: 'Server C', ip: '192.168.1.3', updatedTime: '2023-10-03' },
        { name: 'Server D', ip: '192.168.1.4', updatedTime: '2023-10-04' },
        { name: 'Server E', ip: '192.168.1.5', updatedTime: '2023-10-05' },
        { name: 'Server F', ip: '192.168.1.6', updatedTime: '2023-10-06' },
        { name: 'Server A', ip: '192.168.1.1', updatedTime: '2023-10-07' },
        { name: 'Server B', ip: '192.168.1.2', updatedTime: '2023-10-08' },
        { name: 'Server C', ip: '192.168.1.3', updatedTime: '2023-10-09' },
        { name: 'Server D', ip: '192.168.1.4', updatedTime: '2023-10-10' },
        { name: 'Server E', ip: '192.168.1.5', updatedTime: '2023-10-11' },
        { name: 'Server F', ip: '192.168.1.6', updatedTime: '2023-10-12' },
        // 更多服务器数据...
      ],
      loadingStudents: false
    };
  },
  created() {
		    this.queryIpMachineList()
	},
  methods: {
    onRefresh(event) {
      this.loadingServers = true;
    },
    handleRegenerate() {
        batchInsertMachine().then(
			res=>{
				this.serverList = res.rows
				console.log(res.rows)
			}
		)
    },
    queryIpMachineList(){
      // 重新生成逻辑
      ipMachineList().then(res => {
              this.serverList = res.rows
              console.log(res.rows)
      })
    },
    back() {
      console.log('Grid item clicked');
      uni.switchTab({
        url: '/pages/work/index'  // 使用绝对路径
      });
    }
  }
}
</script>

<style>
/* .container {
  padding: 20px;
} */

.back-button {
  display: block;
  margin-bottom: 10px;
  padding: 5px 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
  text-align: left; /* 按钮文本左对齐 */
}

.back-button:hover {
  background-color: #45a049;
}

/* 确保表格容器占满宽度 */
.table-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow-x: auto; /* 允许水平滚动 */
}

.regenerate-button {
  align-self: flex-end;
  margin-bottom: 10px;
  padding: 5px 10px; /* 调整按钮大小 */
  background-color: #1aad19;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px; /* 调整字体大小 */
}

.regenerate-button:hover {
  background-color: #189f16;
}

/* 自动适应宽度的表格 */
uni-table {
  table-layout: auto;
  width: 100%;
  border-collapse: collapse; /* 确保边框合并 */
}

/* 表头和单元格的样式 */
uni-th, uni-td {
  text-align: center;
  padding: 8px;
  border: 1px solid #ddd; /* 边框样式 */
}

.refresh-content {
  padding-top: 44px; /* 确保内容不被导航栏遮挡 */
}
</style>
